<!--  -->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="7" :xs="24" class="mgb20">
        <my-card title="系统数据">
          <line-echart :x-axis="arr[0]" :y-axis="arr[1]"></line-echart>
        </my-card>
      </el-col>
      <el-col :span="10" :xs="24" class="mgb20">
        <my-card title="用户数据">
          <rose-echart :rose-data="userByRole"></rose-echart>
        </my-card>
      </el-col>
      <el-col :span="7" :xs="24" class="mgb20">
        <my-card title="角色分布">
          <pie-echart :pie-data="userGroupByGender"></pie-echart>
        </my-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">

      <el-col :md="12" :xs="24" class="mgb20">
        <my-card title="角色分布">
          <map-echart :map-data="dataList"></map-echart>
        </my-card>
      </el-col>

      <el-col :md="12" :xs="24" class="mgb20">
        <my-card title="系统数据">
          <bar-echart :x-axis="arr[0]" :y-axis="arr[1]">
          </bar-echart>
        </my-card>
      </el-col>
    </el-row>


  </div>
</template>
<script setup lang='ts' >
import { ref, computed, watchEffect } from 'vue'
import MyCard from '@/base-ui/card';
import LineEchart from "@/components/page-echarts/line-echart"
import RoseEchart from "@/components/page-echarts/rose-echart"
import PieEchart from "@/components/page-echarts/pie-echart"
import BarEchart from "@/components/page-echarts/bar-echart"
import MapEchart from "@/components/page-echarts/map-echart"
import { useStore } from "@/store"
const store = useStore()
let arr: any = [[], []]
  store.dispatch('dashboard/TotalAction')
  store.dispatch('overview/userByRoleAction')
  store.dispatch('overview/userGroupByGenderAction')
const total = computed(() => store.state.dashboard.total)
watchEffect(() => {
  total.value.forEach(item => {
    arr[0].push(item.title)
    arr[1].push(item.count)
  })
})

const userByRole = computed(() => store.state.overview.userByRole.map(item => {
  return { name: item.name, value: item.userRoles?.length }
}))

let map = new Map<number, string>([[0, "保密"], [1, "男"], [2, "女"],])
const userGroupByGender = computed(() => store.state.overview.userGroupByGender.map(item => {
  return { name: map.get(item.gender)!, value: item.count }
}))




let dataList = [
  {
    name: '北京市',
    value: 81
  },
  {
    name: '天津市',
    value: 60
  },
  {
    name: '上海市',
    value: 54
  },
  {
    name: '重庆市',
    value: 390
  },
  {
    name: '河北省',
    value: 1741
  },
  {
    name: '河南省',
    value: 2634

  },
  {
    name: '云南省',
    value: 755
  },
  {
    name: '辽宁省',
    value: 826
  },
  {
    name: '黑龙江省',
    value: 225
  },
  {
    name: '湖南省',
    value: 969
  },
  {
    name: '安徽省',
    value: 818
  },
  {
    name: '山东省',
    value: 3011
  },
  {
    name: '新疆维吾尔自治区',
    value: 1528
  },
  {
    name: '江苏省',
    value: 929
  },
  {
    name: '浙江省',
    value: 746
  },
  {
    name: '江西省',
    value: 667
  },
  {
    name: '湖北省',
    value: 957
  },
  {
    name: '广西省',
    value: 1810
  },
  {
    name: '甘肃省',
    value: 655
  },
  {
    name: '山西省',
    value: 843
  },
  {
    name: '内蒙古省',
    value: 310
  },
  {
    name: '陕西省',
    value: 1926
  },
  {
    name: '吉林省',
    value: 149
  },
  {
    name: '福建省',
    value: 741
  },
  {
    name: '贵州省',
    value: 252
  },
  {
    name: '广东省',
    value: 1594
  },
  {
    value: 4,
    name: '青海省',
  },
  {
    name: '西藏省',
    value: 1
  },
  {
    name: '四川省',
    value: 971
  },
  {
    name: '宁夏回族自治区省',
    value: 255
  },
  {
    name: '海南省',
    value: 406
  },
  {
    name: '内蒙古自治区',
    value: 406
  },
  {
    name: '西藏自治区',
    value: 406
  },
];
</script>
<style lang='less' scoped>
.mgb20 {
  margin-bottom: 20px;

}
</style>
